<template>
	<div>
		<el-dialog
			title="表头配置"
			:visible.sync="visible"
			:before-close="beforeClose"
			:close-on-click-modal="false"
			append-to-body
			width="800px"
		>
			<div style="margin-bottom: 10px; display: flex; align-items: center">
				<span>表头地址:</span>
				<el-input
					v-model="url"
					placeholder="请输入地址"
					style="width: 50%; margin-left: 5px"
					size="small"
					clearable
				/>
				<el-button
					type="primary"
					size="small"
					style="margin-left: 5px"
					@click="handlerGetdata"
				>
					获取数据
				</el-button>
				<el-tooltip
					class="item"
					effect="dark"
					content="输入地址后以远程地址数据为主，以本地数据为主请获取数据后清除地址"
					placement="top-start"
				>
					<i class="el-icon-info" style="margin-left: 5px" />
				</el-tooltip>
			</div>
			<draggable
				:list="column"
				:animation="340"
				group="selectItem"
				handle=".option-drag"
			>
				<div v-for="(item, index) in column" :key="index" class="select-item">
					<div class="select-line-icon option-drag">
						<i class="el-icon-s-operation" />
					</div>
					<el-input
						v-model="item.title"
						placeholder="字段名"
						size="small"
						style="width: 50%"
					/>
					<el-input
						v-model="item.field"
						placeholder="字段值"
						size="small"
						style="width: 50%"
					/>
					<el-input
						v-model.number="item.width"
						placeholder="列宽"
						size="small"
						style="width: 50%"
					/>
					<el-select
						v-model="item.sortable"
						placeholder="是否排序"
						size="small"
						style="width: 50%; margin-left: 4px"
					>
						<el-option label="排序" :value="true"> </el-option>
						<el-option label="不排序" :value="false"> </el-option>
					</el-select>
					<el-select
						v-model="item.filterable"
						placeholder="是否可查询"
						size="small"
						style="width: 50%; margin-left: 4px"
						@change="handlerChangeFilterable(item, $event)"
					>
						<el-option label="查询" :value="true"> </el-option>
						<el-option label="不查询" :value="false"> </el-option>
					</el-select>
					<div
						class="close-btn select-line-icon"
						@click="column.splice(index, 1)"
					>
						<i class="el-icon-remove-outline" />
					</div>
				</div>
			</draggable>
			<div style="margin-left: 20px; margin-bottom: 20px">
				<el-button
					style="padding-bottom: 0"
					icon="el-icon-circle-plus-outline"
					type="text"
					@click="addSelectItem"
				>
					添加字段
				</el-button>
			</div>
			<!-- <span></span> -->
			<span slot="footer">
				<el-button @click="handlerCancel">取消</el-button>
				<el-button type="primary" @click="handlerSubmit">提交</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
	components: {
		draggable,
	},
	props: {
		visible: Boolean,
		columns: {
			type: Array,
			default: () => [],
		},
		tableHeaderUrl: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			column: [],
			CopyColumn: [],
			props: { key: 'id', label: 'name' },
			filterFields: [],
			url: '',
		}
	},
	watch: {
		columns: {
			handler: function (val) {
				this.column = [...val]
				this.CopyColumn = [...val]
			},
			immediate: true,
			// deep: true
		},
		// filterFields(val){
		// 	if(val.length > 0) {
		// 		this.column.forEach()
		// 	}
		// },
		tableHeaderUrl: {
			handler: function (val) {
				this.url = val
			},
			immediate: true,
		},
	},
	methods: {
		handlerChangeFilterable(val, b) {
			// console.log(a, b);
			if (b) {
				this.filterFields = Array.from(
					new Set([...this.filterFields, val.field]),
				)
				// console.log(this.filterFields);
			} else {
				let index = this.filterFields.findIndex(i => i === val.field)
				if (index != -1) {
					this.filterFields.splice(index, 1)
					// console.log(this.filterFields);
				}
			}
		},
		handlerGetdata() {
			if (this.url.includes('http://') || this.url.includes('https://')) {
				this.$axios
					.get(this.url)
					.then(({ data }) => {
						if (data.data) {
							// this.$emit('tableHeaderEdit', data.data)
							// this.$nextTick(() => {
							// 	this.handlerCancel()
							// })
							// this.column = data.data.columns;
							this.props = data.data.props || { key: 'id', label: 'name' }
							this.filterFields =
								data.data.filterFields ||
								data.data.columns.map(i => {
									return i.field
								})
							data.data.columns.forEach(i => {
								if (this.filterFields.find(j => j === i.field)) {
									i.filterable = true
								} else {
									i.filterable = false
								}
							})
							this.column = data.data.columns
						}
					})
					.catch(() => {
						this.$message.error('获取数据失败')
					})
			} else {
				this.$message.error('请检查地址是否完整')
			}
		},
		handlerSubmit() {
			// if (this.url) {
			// 	if (this.url.includes('http://') || this.url.includes('https://')) {
			// 		this.$emit('tableHeaderEdit', [])
			// 	} else {
			// 		this.$message.error('请检查地址是否完整')
			// 	}
			// } else {
			this.$emit(
				'tableHeaderEdit',
				{
					columns: this.column,
					props: this.props,
					filterFields: this.filterFields,
				},
				this.url,
			)
			this.$nextTick(() => {
				this.handlerCancel()
			})
			// }
		},
		handlerCancel() {
			this.column = [...this.CopyColumn]
			this.beforeClose()
		},
		beforeClose() {
			this.$emit('update:visible', false)
		},
		addSelectItem() {
			this.column.push({
				field: '',
				title: '',
				width: '',
				sortable: false,
				filterable: false,
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.select-item {
	display: flex;
	border: 1px dashed #fff;
	box-sizing: border-box;
	& .close-btn {
		cursor: pointer;
		color: #f56c6c;
	}
	& .el-input + .el-input {
		margin-left: 4px;
	}
}
.select-item + .select-item {
	margin-top: 4px;
}
.select-item.sortable-chosen {
	border: 1px dashed #409eff;
}
.select-line-icon {
	line-height: 32px;
	font-size: 22px;
	padding: 0 4px;
	color: #777;
	cursor: move;
}
</style>
